<template>
  <div class="sjzyd-page">
    <el-card class="box-card">
      <div class="inpbox">
        <p class="ppp">
          <span>作业编号:</span>
          <el-input v-model="input" placeholder="请输入快递员姓名" class="kdyInp" />
          <span>司机姓名:</span>
          <el-input v-model="input" placeholder="请输入快递员姓名" class="kdyInp" />
          <span>作业状态:</span>
          <el-select v-model="value" class="m-2" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </p>
        <p class="ppp">
          <span>运输任务编号:</span>
          <el-input v-model="input" placeholder="请输入快递员姓名" class="kdyInp" />
          <el-button type="danger" class="btn">搜索</el-button>
          <el-button class="rest">重置</el-button>
        </p>
      </div>
    </el-card>
    <el-card class="box-card2">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="70px" />
        <el-table-column prop="name" label="作业编号" />
        <el-table-column prop="address" label="司机姓名" />
        <el-table-column prop="address" label="所属转运中心" />
        <el-table-column prop="address" label="车牌号码" />
        <el-table-column prop="address" label="计划发车时间" />
        <el-table-column prop="address" label="实际到达时间" />
        <el-table-column prop="address" label="运输任务编号" />
        <el-table-column prop="address" label="作业状态" />
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const input = ref("");
const value = ref("");
const currentPage4 = ref(4);
const pageSize4 = ref(10);
const options = [
  {
    value: "待提货",
    label: "待提货",
  },
  {
    value: "在途",
    label: "在途",
  },
  {
    value: "已支付",
    label: "已支付",
  },
  {
    value: "已作废",
    label: "已作废",
  },
];
const tableData = [
  {
    id: "1",
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "2",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "3",
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "4",
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style scoped>
.sjzyd-page {
  height: 100%;
  width: 100%;
  padding: 20px;
}

.demo-pagination-block {
  margin-top: 20px;
  margin-left: 25%;
}

.kdyInp {
  width: 20%;
  height: 43px;
  /* margin-left: 2%; */
  margin-right: 5%;
}

.m-2 {
  /* margin-left: 20px; */
  width: 20%;
  height: 43px;
}

.btn {
  /* margin-left: 40px; */
}

.text {
  font-size: 14px;
}

.btn {
  width: 85px;
  height: 35px;
}

.rest {
  height: 35px;
  width: 85px;
}

.inpbox {
  width: 100%;
  /* height: 100%; */
}

.ppp {
  margin-top: 8px;
  /* margin-bottom: 34px; */
}

.ppp>span {
  display: inline-block;
  width: 110px;
}

.box-card {
  /* height: 160px; */
  width: 94%;
}

.box-card2 {
  /* height: 40rem; */
  margin-top: 20px;
  width: 94%;
  box-sizing: border-box;
}
</style>